<template>
  <div class="top100-wrapper">
    <div class="panel">
      <div class="panel-header">
        <span class="panel-more">
          <a
            href="/board/4"
            class="textcolor_orange"
            data-act="all-TOP100-click"
          >
            <span>查看完整榜单</span>
          </a>
          <span class="panel-arrow panel-arrow-orange"></span>
        </span>
        <span class="panel-title">
          <span class="textcolor_orange"><h2>TOP 100</h2></span>
        </span>
      </div>
      <div class="panel-content">
        <ul class="ranking-wrapper ranking-top100">
          <li class="ranking-item ranking-top ranking-index-1">
            <a
              href="/films/1200486"
              target="_blank"
              data-act="TOP100-movie-click"
              data-val="{movieid:1200486}"
            >
              <div class="ranking-top-left">
                <i class="ranking-top-icon"></i>
                <img
                  class="ranking-img default-img"
                  alt="我不是药神电影海报"
                  src="https://p0.meituan.net/movie/574c998b534c4354e46e8c0cf89ca76037249.jpg@120w_80h_1e_1c"
                />
              </div>
              <div class="ranking-top-right">
                <div class="ranking-top-right-main">
                  <span class="ranking-top-moive-name">我不是药神</span>

                  <p class="ranking-top-wish">
                    <span class="stonefont">.</span>分
                  </p>
                </div>
              </div>
            </a>
          </li>

          <li class="ranking-item ranking-index-2">
            <a
              href="/films/1297"
              target="_blank"
              data-act="TOP100-movie-click"
              data-val="{movieid:1297}"
            >
              <span class="normal-link">
                <i class="ranking-index">2</i>
                <span class="ranking-movie-name">肖申克的救赎</span>

                <span class="ranking-num-info">
                  <span class="stonefont">.</span>分
                </span>
              </span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TtmsTop",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
@import url("@/assets/css/index-item.css");
.aside .top100-wrapper {
    margin-top: 100px;
}
.aside .panel {
    margin: 0;
}
.panel-header {
    overflow: hidden;
    height: 26px;
    line-height: 26px;
}
.panel-more {
    font-size: 14px;
    line-height: 16px;
    float: right;
    margin-top: 10px;
}
.textcolor_orange {
    color: #ffb400!important;
}
.top100-wrapper .ranking-top-icon {
    background-image: url();
}

.ranking-top-icon {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 25px;
    background: url() no-repeat;
    background-size: contain;
}
.panel-arrow-orange {
    background: url() top no-repeat;
}
.panel-arrow {
    display: inline-block;
    width: 8px;
    height: 14px;
    vertical-align: top;
}
// a {
//     text-decoration: none;
// }
// .panel-title>span>h2 {
//     display: inline;
//     font-size: 26px;
//     font-weight: 400;
// }
// .panel-arrow-orange {
//     background: url() top no-repeat;
// }
// .panel-arrow {
//     display: inline-block;
//     width: 8px;
//     height: 14px;
//     vertical-align: top;
// }
// .panel-title {
//     font-size: 26px;
//     color: #ffb400;
// }
// .panel-content {
//     overflow: hidden;
//     width: 100%;
//     margin-top: 23px;
// }
// .ranking-wrapper {
//     overflow: hidden;
// }
// ul, ul li {
//     list-style: none;
//     padding: 0;
//     margin: 0;
// }
</style>
